<style src="../../style/statistics.css" scoped></style>
<template>
    <div style="height:100%;" class="padding10">
        <Row class="divBar">
            <!--搜索框-->
                <Col span="14">
                   <label  v-show="userInfo.AreaCode=='530000000000'">所属地区:</label>
                    <Select v-model="searchModel.AreaCode" placeholder="全部" :label-in-value="true" @on-change="SearchCascaderChange" style="width:120px" v-show="userInfo.AreaCode=='530000000000'">
                        <Option :value="item.value" v-for="item in AreaList" :key="item.value">{{item.label}}</Option>
                    </Select>
                    填报年度:
                    <Select v-model="searchModel.FillInYear" placeholder="全部" :label-in-value="true" @on-change="GetData()" style="width:120px">
                        <Option :value="item.DictValue" v-for="item in CreateYearList" :key="item.DictValue">{{item.DictText}}</Option>
                    </Select>
                    <Button  type="primary" v-show="listShow" @click="Download()">导出列表</Button> 
                </Col>                      
                <Col span="10"  style="text-align:right;"> 
                <RadioGroup v-model="currentButton" @on-change="changeButton" type="button"  size="large">
                        <Radio label="listShow" title="列表"><Icon type="ios-paper" size="35"></Icon></Radio>                            
                        <Radio label="barShow" title="柱状图"><Icon type="stats-bars" size="35"></Icon></Radio>
                        <Radio label="mapShow" title="地图"><Icon type="android-map" size="35"></Icon></Radio>                            
                    </RadioGroup>                    
              </Col>                              
            </Row>
            <Row  v-show="listShow">
            <!-- 列表-->
            <div class="col-margin" >
                <Table  :columns="columnList" no-data-text="暂无数据" :data="dataList" border :height="clientHeight"></Table>
                <!-- <table class="statisTable" :style="tableStyle" v-show="!isCounty">
                    <thead>
                        <tr>
                            <th rowspan="2">地区</th>
                            <th colspan="1">组培苗</th>
                            <th colspan="1">原原种</th>
                            <th colspan="2">原种</th>
                            <th colspan="2">一级种</th>                        
                        </tr>
                        <tr>
                            <th>全年产量（万株）</th>
                            <th>大棚面积（平方米）</th>
                            <th>面积（亩）</th>
                            <th>产量（吨）</th>
                            <th>面积（亩）</th>
                            <th>产量（吨）</th>                    
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(dataModel,index) in dataList" :key="index" :style="rowStyle(index,dataList.length)">
                            <td style="text-align:center">
                                {{dataModel.AreaName}}
                            </td>
                            <td>
                                {{dataModel.ZPyield}}
                            </td>
                            <td>
                                {{dataModel.YYZdpArea}}
                            </td>
                            <td>
                                {{dataModel.YZarea}}
                            </td>
                            <td>
                                {{dataModel.YZYield}}
                            </td>
                            <td>
                                {{dataModel.YJZarea}}
                            </td> 
                            <td>
                                {{dataModel.YJZYield}}
                            </td>
                        </tr>
                    </tbody>
                </table>
                
                <table class="statisTable" :style="tableStyle" v-show="isCounty">
                    <thead>
                        <tr>
                            <th colspan="2">组培苗</th>
                            <th colspan="5">原原种</th>
                            <th colspan="5">原种</th>
                            <th colspan="4">一级种</th>
                            <th rowspan="2">备注</th>                           
                        </tr>
                        <tr>
                            <th>全年产量（万株）</th>
                            <th>品种</th>
                            <th>大棚面积（平方米）</th>
                            <th>单个生产周期种植面积（平方米）</th>
                            <th>平均产量（粒/平方米）</th>
                            <th>品种</th>
                            <th>全年繁种次数（次）</th>
                            <th>面积（亩）</th>
                            <th>亩产量（公斤）</th>
                            <th>原原种来源</th>
                            <th>品种</th>
                            <th>产地</th>
                            <th>面积（亩）</th>
                            <th>亩产量（公斤）</th>
                            <th>品种</th>
                            <th>产地</th>                            
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(dataModel,index) in cdataList" :key="index">
                            <td>
                                {{dataModel.ZPyield}}
                            </td>
                            <td>
                                {{dataModel.ZPvariety}}
                            </td>
                            <td>
                                {{dataModel.YYZdpArea}}
                            </td>
                            <td>
                                {{dataModel.YYZsingleArea}}
                            </td>
                            <td>
                                {{dataModel.YYZavgYield}}
                            </td>
                            <td>
                                {{dataModel.YYZvariety}}
                            </td>
                            <td>
                                {{dataModel.YYZplantTimes}}
                            </td> 
                            <td>
                                {{dataModel.YZarea}}
                            </td>
                            <td>
                                {{dataModel.YZmuYield}}
                            </td>
                            <td>
                                {{dataModel.YZyyzOrigin}}
                            </td>
                            <td>
                                {{dataModel.YZvariety}}
                            </td> 
                            <td>
                                {{dataModel.YZoriginPlace}}
                            </td>
                            <td>
                                {{dataModel.YJZarea}}
                            </td> 
                            <td>
                                {{dataModel.YJZmuYield}}
                            </td>
                            <td>
                                {{dataModel.YJZvariety}}
                            </td>
                            <td>
                                {{dataModel.YJZoriginPlace}}
                            </td>
                            <td>
                                {{dataModel.Remark}}
                            </td>
                        </tr>
                    </tbody>
                </table>-->
            </div>
         </Row> 
         <Row v-show="barShow">
            <!--柱状图-->
            <div  id="divBar">
                <Tabs type="card">
                    <TabPane label="组培苗">
                        <div id="divBarOne" style="border:1px solid #D7DDE4;"></div>
                    </TabPane>
                    <TabPane label="原原种">
                        <div id="divBarTwo" style="border:1px solid #D7DDE4; "></div>
                    </TabPane>
                    <TabPane  label="原种">
                        <div id="divBarThree" style="border:1px solid #D7DDE4; "></div>
                    </TabPane>
                    <TabPane label="一级种">
                        <div id="divBarFour" style="border:1px solid #D7DDE4; "></div>
                    </TabPane>
                </Tabs>
            </div>
        </Row>
        <Row  v-show="mapShow" >
            <!--地图展示-->
            <Tabs type="card">
                <TabPane label="组培苗">
                    <div id="divMapOne" style="border:1px solid #D7DDE4; "></div>
                </TabPane>
                <TabPane label="原原种">
                    <div id="divMapTwo" style="border:1px solid #D7DDE4;"></div>
                </TabPane>
                <TabPane label="原种">
                    <div id="divMapThree" style="border:1px solid #D7DDE4; "></div>
                </TabPane>
                <TabPane label="一级种">
                    <div id="divMapFour" style="border:1px solid #D7DDE4; "></div>
                </TabPane>
            </Tabs>
        </Row>
    </div>
</template>
<script>
export default {
    data() {
        return {
            isCounty:false,
            cdataList:[],
            showType:false,
            detailList:[],//详情页列表对象
            currentButton:'listShow',
            listShow:true,//列表显示控制器
            barShow:false,//柱状图显示控制器
            mapShow:false,//地图显示控制器 
            userInfo: '',
            AreaList: [],//所属行政区划数组,
            TableCodeList: this.GetGroupDict("ReportTableName"),//表名称
            CreateYearList: this.GetGroupDict("ReportYear"),//周期
            tableStyle:{
                height:window.innerHeight - 183+'px',
                marginBottom:'50px'
                },
            DataModel: {//编辑模型
                Id: 0,
                ReportId: '',
                
            },
            //查询模型：根据需求删除不不要查询条件
            searchModel: {
                ReportCode: 'PotSeasonProduct',
                FillInYear: new Date().getFullYear()+"",
                TimesType: '',
                AreaCode: this.GetlocaStorage("potUserinfo").AreaCode,
                Status:'',
                PageNumber: 1, PageSize: 20
            },
            dataList:[],
            columnList:[
                {title:'地区',key:'AreaName',align:'center'},
                {title:'组培苗',align:'center',children:[
                    {title:'全年产量（万株）',key:'ZPyield',align:'right',sortable: true},
                ]},
                {title:'原原种',align:'center',children:[
                    {title:'大棚面积（平方米）',key:'YYZdpArea',align:'right',sortable: true},
                ]},
                {title:'原种',align:'center',children:[
                    {title:'面积（亩）',key:'YZarea',align:'right',sortable: true},
                    {title:'产量（吨）',key:'YZYield',align:'right',sortable: true},
                ]},
                {title:'一级种',align:'center',children:[
                    {title:'面积（亩）',key:'YJZarea',align:'right',sortable: true},
                    {title:'产量（吨）',key:'YJZYield',align:'right',sortable: true},
                ]},
            ],
            CurrentAreaName:'',
            //柱状图数据
            AreaData:[],
            //组培苗
            ZPyieldData:[],
            //原原种
            YYZdpAreaData:[],
            //原种
            YZareaData:[],
            YZYieldData:[],
            //一级种
            YJZareaData:[],
            YJZYieldData:[],

            barList0:[],
            barList1:[],
            barList2:[],
            barList3:[],
            
            //地图数据
            mapType:'',
            echartsItem0:['全年产量（万株）'],
            echartsItem1:['大棚面积（平方米）'],
            echartsItem2:['面积（亩）','产量（吨）'],
            echartsItem3:['面积（亩）','产量（吨）'],
            GeoData:'',
            //组培苗
            MapZPyieldData:[],
            //原原种
            MapYYZdpAreaData:[],
            //原种
            MapYZareaData:[],
            MapYZYieldData:[],
            //一级种
            MapYJZareaData:[],
            MapYJZYieldData:[],

            mapList0:[],
            mapList1:[],
            mapList2:[],
            mapList3:[],
            clientHeight: window.innerHeight - 183,//表格默认高度
        }
    },
    mounted() {
        //table高度计算方法
        const that = this;
        window.onresize = () => {
            return (() => {
                that.clientHeight = window.innerHeight - 183;
            })()
        };
    },
    methods: {
        SearchAreaList() {
            var areaCode = this.userInfo.AreaCode;
            var areaList=[];
            var templist = [];
            var areaEntity = new Object();
            areaEntity.value=areaCode;
            areaEntity.children=[];
            if (areaCode != '530000000000' && areaCode != null) {
                var item = this.GetlocaStorage("areatreelist")[0];
                areaEntity.label="全州（市）";
                for (var i = 0; i < item.children.length; i++) {
                    if (item.children[i].value == areaCode) {
                        areaList.push(item.children[i]);
                    }
                }
            } else {
                areaEntity.label="全省";
                areaList = this.GetlocaStorage("areatreelist");
            }
            templist.push(areaEntity);
             this.AreaList=templist.concat(areaList[0].children);
        },
        changeButton(n){
            if(n=="listShow")
            {
                this.listShow=true;//显示列表
                this.barShow=false;
                this.mapShow=false;
            }
            else if(n=="barShow")
            {
                this.listShow=false;
                this.barShow=true;//显示柱状图
                this.mapShow=false;
               // this.showPie();
            }
             else if(n=="mapShow")
            {
                this.listShow=false;
                this.barShow=false;//显示地图
                this.mapShow=true;
                //  this.getStatsData();   //获取地区统计数据  
                //this.showMap();
            }
            else{
                 this.listShow=true;//默认显示列表
                 this.barShow=false;
                 this.mapShow=false;
            }
        },
        Download(){
            if(this.isCounty){
                window.open(this.$http.defaults.baseURL + "PotSeed/GetExcelData?FillInYear="  + this.searchModel.FillInYear + "&&AreaCode=" + this.searchModel.AreaCode);
            }else{
                window.open(this.$http.defaults.baseURL + "PotSeed/GetStatisExcel?FillInYear="  + this.searchModel.FillInYear + "&&AreaCode=" + this.searchModel.AreaCode);
            }
        },
        GetData(){
          if(this.isCounty){
                this.getCountyListData();
            }else{
                this.getListData();
            }
        },
        rowStyle(index,length){  
            let striprow ={ backgroundColor: '#ebf7ff'};    
            if(index==(length-1)){       
                return {
                    backgroundColor: '#f9c912'
                }
            }
            else if(index%2 !=0){
                return striprow;
            }
             else{
               return 
           }
        },
        rowclass(item,index){
          let striprow ={
            backgroundColor: '#ebf7ff'
          }
          let cityrow = {
             backgroundColor: '#ff6600'
          }
          let provinrow = {
            backgroundColor: '#183'
          }
            if(index %2 ==0){
              if(item.tag==1){
                return cityrow
              }
              else if(item.tag==2){
                return provinrow
              }              
            }
            else{
              if(item.tag==1){
                return cityrow
              }
              else if(item.tag==2){
                return provinrow
              }
              else{
                return striprow
              }
            }
        },
        getListData(){
            var self = this;
            //判断当前用户是否为省级账号
            if(self.userInfo.AreaCode=="530000000000")
            {
                // self.isProvince=true;
                self.mapType=self.searchModel.AreaCode;
            }
            else{
                self.mapType=self.userInfo.AreaCode;
            }
            //柱状图数据
            self.AreaData = [],
            //组培苗
            self.ZPyieldData=[],
            //原原种
            self.YYZdpAreaData=[],
            //原种
            self.YZareaData=[],
            self.YZYieldData=[],
            //一级种
            self.YJZareaData=[],
            self.YJZYieldData=[],

            self.barList0=[],
            self.barList1=[],
            self.barList2=[],
            self.barList3=[],
            //地图数据
            //组培苗
            self.MapZPyieldData=[],
            //原原种
            self.MapYYZdpAreaData=[],
            //原种
            self.MapYZareaData=[],
            self.MapYZYieldData=[],
            //一级种
            self.MapYJZareaData=[],
            self.MapYJZYieldData=[],

            self.mapList0=[],
            self.mapList1=[],
            self.mapList2=[],
            self.mapList3=[],
            self.GeoData=self.GetGeoData(self.mapType); 
            this.$http.get('PotSeed/GetStatisListData',{params: {AreaCode: this.searchModel.AreaCode,FillInYear: this.searchModel.FillInYear}}).then(function(res){
                if(res.data.status==1){
                    self.dataList = res.data.model;
                    self.CurrentAreaName=res.data.model[res.data.model.length-1].AreaName=="合计"?'云南省':res.data.model[res.data.model.length-1].AreaName;
                    for(var i=0;i<res.data.model.length-1;i++)
                    {
                        //柱状图数据
                        self.AreaData.push(res.data.model[i].AreaName)
                        //组培苗
                        self.ZPyieldData.push(res.data.model[i].ZPyield);
                        //原原种
                        self.YYZdpAreaData.push(res.data.model[i].YYZdpArea);
                        //原种
                        self.YZareaData.push(res.data.model[i].YZarea);
                        self.YZYieldData.push(res.data.model[i].YZYield);
                        //一级种
                        self.YJZareaData.push(res.data.model[i].YJZarea);
                        self.YJZYieldData.push(res.data.model[i].YJZYield);


                        //地图数据
                        //组培苗
                        self.MapZPyieldData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].ZPyield});
                        //原原种
                        self.MapYYZdpAreaData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].YYZdpArea});
                        //原种
                        self.MapYZareaData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].YZarea});
                        self.MapYZYieldData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].YZYield});
                        //一级种
                        self.MapYJZareaData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].YJZarea});
                        self.MapYJZYieldData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].YJZYield});
                    }
                    
                    //柱状图数据
                    self.barList0.push(self.ZPyieldData);
                    self.barList1.push(self.YYZdpAreaData);
                    self.barList2.push(self.YZareaData,self.YZYieldData);
                    self.barList3.push(self.YJZareaData,self.YJZYieldData);
                    self.showBar();

                    //地图数据
                    self.mapList0.push(self.MapZPyieldData);
                    self.mapList1.push(self.MapYYZdpAreaData);
                    self.mapList2.push(self.MapYZareaData,self.MapYZYieldData);
                    self.mapList3.push(self.MapYJZareaData,self.MapYJZYieldData);
                    self.showMap();
                }else{
                    self.$Modal.error({title:'提示信息',content:res.data.message});
                }
            })
        },
        showBar(){//显示柱状图
            //显示柱状图
            var self=this;
            var containerBarOne=document.getElementById('divBarOne');
            var containerBarTwo=document.getElementById('divBarTwo');
            var containerBarThree=document.getElementById('divBarThree');
            var containerBarFour=document.getElementById('divBarFour');
            var containerTable=document.getElementsByClassName('ivu-col ivu-col-span-4');
            // //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
            var resizeContainerBar = function () {
                //containerTable[0].clientWidth 左侧菜单栏的宽度
                containerBarOne.style.width = (window.innerWidth- containerTable[0].clientWidth-40)+'px';
                containerBarOne.style.height = (window.innerHeight-280)+'px';
                containerBarTwo.style.width = (window.innerWidth- containerTable[0].clientWidth-40)+'px';
                containerBarTwo.style.height = (window.innerHeight-330)+'px';
                containerBarThree.style.width = (window.innerWidth- containerTable[0].clientWidth-40)+'px';
                containerBarThree.style.height = (window.innerHeight-330)+'px';
                containerBarFour.style.width = (window.innerWidth- containerTable[0].clientWidth-40)+'px';
                containerBarFour.style.height = (window.innerHeight-330)+'px';
            };
            //设置容器高宽
            resizeContainerBar();
            var myBarOne = myEcharts.init(containerBarOne, 'shine');
            var myBarTwo = myEcharts.init(containerBarTwo, 'shine');
            var myBarThree = myEcharts.init(containerBarThree, 'shine');
            var myBarFour = myEcharts.init(containerBarFour, 'shine');
            var BarNameOne=this.searchModel.FillInYear+'年(三)'+self.CurrentAreaName+'马铃薯种薯生产情况统计表';
            var BarNameTwo=this.searchModel.FillInYear+'年(三)'+self.CurrentAreaName+'马铃薯种薯生产情况统计表';
            var BarNameThree=this.searchModel.FillInYear+'年(三)'+self.CurrentAreaName+'马铃薯种薯生产情况统计表';
            var BarNameFour=this.searchModel.FillInYear+'年(三)'+self.CurrentAreaName+'马铃薯种薯生产情况统计表';
            var optionBarOne = self.GetBarOption(BarNameOne,self.AreaData,self.echartsItem0,self.barList0);
            var optionBarTwo = self.GetBarOption(BarNameTwo,self.AreaData,self.echartsItem1,self.barList1);
            var optionBarThree = self.GetBarOption(BarNameThree,self.AreaData,self.echartsItem2,self.barList2);
            var optionBarFour = self.GetBarOption(BarNameFour,self.AreaData,self.echartsItem3,self.barList3);
            myBarOne.setOption(optionBarOne);
            myBarTwo.setOption(optionBarTwo);
            myBarThree.setOption(optionBarThree);
            myBarFour.setOption(optionBarFour);
           
            //用于使chart自适应高度和宽度
            window.onresize = function () {
                //重置容器高宽
                resizeContainerBar();
                resizeContainerMap();
                myBarOne.resize();
                myBarTwo.resize();
                myBarThree.resize();
                myBarFour.resize();
            };
        },
        showMap(){
            var self=this;
            var containerTable=document.getElementsByClassName('ivu-col ivu-col-span-4');
            //******************显示地图
            
            var containerMapOne=document.getElementById('divMapOne');
            var containerMapTwo=document.getElementById('divMapTwo');
            var containerMapThree=document.getElementById('divMapThree');
            var containerMapFour=document.getElementById('divMapFour');
            // //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
            var resizeContainerMap = function () {
                //containerTable[0].clientWidth 左侧菜单栏的宽度
                containerMapOne.style.width = (window.innerWidth- containerTable[0].clientWidth-22)+'px';
                containerMapOne.style.height = (window.innerHeight-280)+'px';
                containerMapTwo.style.width = (window.innerWidth- containerTable[0].clientWidth-22)+'px';
                containerMapTwo.style.height = (window.innerHeight-280)+'px';
                containerMapThree.style.width = (window.innerWidth- containerTable[0].clientWidth-22)+'px';
                containerMapThree.style.height = (window.innerHeight-280)+'px';
                containerMapFour.style.width = (window.innerWidth- containerTable[0].clientWidth-22)+'px';
                containerMapFour.style.height = (window.innerHeight-280)+'px';
            };
            //设置容器高宽
            resizeContainerMap();

            var myMapOne = myEcharts.init(containerMapOne, 'shine');
            var myMapTwo = myEcharts.init(containerMapTwo, 'shine');
            var myMapThree = myEcharts.init(containerMapThree, 'shine');
            var myMapFour = myEcharts.init(containerMapFour, 'shine');
            var MapNameOne=this.searchModel.FillInYear+'年(三)'+self.CurrentAreaName+'马铃薯种薯生产情况统计表';
            var MapNameTwo=this.searchModel.FillInYear+'年(三)'+self.CurrentAreaName+'马铃薯种薯生产情况统计表';
            var MapNameThree=this.searchModel.FillInYear+'年(三)'+self.CurrentAreaName+'马铃薯种薯生产情况统计表';
            var MapNameFour=this.searchModel.FillInYear+'年(三)'+self.CurrentAreaName+'马铃薯种薯生产情况统计表';
            var optionMapOne = self.GetMapOption(MapNameOne,self.GeoData,self.mapType,self.echartsItem0,self.mapList0);
            var optionMapTwo = self.GetMapOption(MapNameTwo,self.GeoData,self.mapType,self.echartsItem1,self.mapList1);
            var optionMapThree = self.GetMapOption(MapNameThree,self.GeoData,self.mapType,self.echartsItem2,self.mapList2);
            var optionMapFour = self.GetMapOption(MapNameFour,self.GeoData,self.mapType,self.echartsItem3,self.mapList3);
            myMapOne.setOption(optionMapOne);
            myMapTwo.setOption(optionMapTwo);
            myMapThree.setOption(optionMapThree);
            myMapFour.setOption(optionMapFour);
            //用于使chart自适应高度和宽度
            window.onresize = function () {
                //重置容器高宽
                resizeContainerMap();
                myMapOne.resize();
                myMapTwo.resize();
                myMapThree.resize();
                myMapFour.resize();
            };
        },
        getCountyListData(){
            var self = this;
            this.$http.get('PotSeed', {params:{AreaCode:this.searchModel.AreaCode,FillInYear:this.searchModel.FillInYear}}).then(function (res) {
                if (res.data.status == 1) {
                    self.cdataList = res.data.model.list;
                }
                else {
                    self.$Modal.error({ title: '提示信息', content: res.data.message });
                }
            });
        },
        currentYear() {
           let year = new Date().getFullYear();
           let month = new Date().getMonth();
            if (month > 1) {
                this.searchModel.FillInYear = year.toString();
            } else {
               this.searchModel.FillInYear = (year - 1).toString();
              }
        },
        SearchCascaderChange() {
            if(this.searchModel.AreaCode.substr(4,2) !="00"){
                this.isCounty = true;
            }
            else{
                this.isCounty = false;
            }
            
            this.GetData();
        },
    },
    //创建Vue页面方法
    created: function () {
       // this.currentYear();
       this.userInfo = this.GetlocaStorage("potUserinfo");
       this.AreaList = this.getChildAreaList(this.userInfo.AreaCode)
       this.getListData();
    },
    watch: {
        //需要监听的在此处新增监听对象
    }
}
</script>
